<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Listen 1</title>

    <link href="{{ static_url("css/bootstrap.min.css") }}" rel="stylesheet">
    <link href="{{ static_url("css/angular-ui-notification.css") }}" rel="stylesheet">

    <link href="{{ static_url("css/cover.css") }}" rel="stylesheet">
    <link href="{{ static_url("css/player.css") }}" rel="stylesheet">

    <script type="text/javascript" src="{{ static_url("js/vendor/jquery-1.12.2.js") }} "></script>
    <script type="text/javascript" src="{{ static_url("js/vendor/angular.js") }} "></script>
    <script type="text/javascript" src="{{ static_url("js/vendor/angular-soundmanager2.js") }} "></script>
    <script type="text/javascript" src="{{ static_url("js/vendor/angular-ui-notification.js") }} "></script>

    <script type="text/javascript" src="{{ static_url("js/app.js") }} "></script>

  </head>

  <body ng-app="listenone"  ng-controller="NavigationController">

    <!-- dialog -->
    <div class="shadow" ng-hide="is_dialog_hidden==1"></div>
    <div class="dialog" ng-hide="is_dialog_hidden==1" ng-style="myStyle">
      <div class="dialog-header"> <span>{{! dialog_title }}</span> <span class="dialog-close" ng-click="closeDialog()">×</span></div>
      <div class="dialog-body">

        <!-- choose playlist dialog -->
        <ul class="dialog-playlist" ng-show="dialog_type==0">
          <li class="detail-add" ng-click="newDialogOption()">
            <img src="/static/images/mycover.jpg" />
            <h2> 新建歌单 </h2>
          </li>
          <li ng-repeat="playlist in myplaylist" ng-class-odd="'odd'" ng-class-even="'even'" ng-click="chooseDialogOption(playlist.list_id)">
            <img ng-src="{{! playlist.cover_img_url }}" />
            <h2> {{! playlist.title }} </h2>
          </li>
        </ul>

        <!-- create new playlist dialog -->
        <div ng-show="dialog_type==1" class="dialog-newplaylist">
           <input type="text" class="form-control" placeholder="输入歌单名称" ng-model="newlist_title"/>
           <button class="btn btn-primary confirm-button" ng-click="createAndAddPlaylist()">创建并添加</button>
           <button class="btn btn-default" ng-click="cancelNewDialog()">取消</button>
        </div>

        <!-- login douban dialog -->
        <div ng-show="dialog_type==2" class="dbimport" ng-controller="ImportController"  ng-init="getLoginInfo()" >
          <form class="form-signin" name="loginForm" ng-submit="loginForm.$valid && loginDouban()" novalidate ng-show="!isDoubanLogin">
            <label for="inputEmail" class="sr-only">邮件地址</label>
            <input type="email" id="inputEmail" class="form-control" name="email" placeholder="登录邮箱" ng-model="session.user" required autofocus>
            <label for="inputPassword" class="sr-only">密码</label>
            <input type="password" id="inputPassword" class="form-control" placeholder="密码" ng-model="session.password" required>
            <img ng-src="{{!validcode_url}}" class="valid-img" ng-click="getLoginInfo()">
            <label for="captchaSolution" class="sr-only">验证码</label>
            <input type="text" id="captchaSolution" class="form-control" placeholder="请输入验证码，看不清请点击图片" ng-model="session.solution" required>
            <button class="btn btn-lg btn-primary btn-block" type="submit" ng-disabled="!loginForm.$valid">登录</button>
            <p class='security-notice'>注：本软件不保存和传输密码给除豆瓣以外的任何组织和个人。</p>
          </form>
          <button class="btn btn-lg btn-primary btn-block" ng-click="importDoubanFav()" ng-show="isDoubanLogin">导入红心兆赫到我的歌单</button>
          <button class="btn btn-lg btn-primary btn-block" ng-click="logoutDouban()" ng-show="isDoubanLogin">退出登录</button>
          <p ng-show="isDoubanLogin">{{! status }}</p>
        </div>

      </div>
    </div>

    <!-- page header -->
    <div class="masthead clearfix">
      <div class="inner">
        <img class="logo" src="/static/images/logo.png" />
        <h3 class="masthead-brand">Listen 1</h3>
        <nav>
          <ul class="nav masthead-nav">
            <li ng-class="{ 'active':current_tag==1 }"><a ng-click="showTag(1)">我的歌单</a></li>
            <li ng-class="{ 'active':current_tag==2 }"><a ng-click="showTag(2)">精选歌单</a></li>
            <li ng-class="{ 'active':current_tag==3 }"><a ng-click="showTag(3)">快速搜索</a></li>
            <li ng-class="{ 'active':current_tag==4 }"><a ng-click="showTag(4)">设置</a></li>
          </ul>
        </nav>
      </div>
    </div>


    <!-- content page: 我的歌单 -->
    <div class="site-wrapper" ng-show="current_tag==1" ng-controller="MyPlayListController">
      <div class="site-wrapper-innerd" resize>
        <div class="cover-container">
          <div class="playlist" ng-init="loadMyPlaylist();">
            <ul class="playlist-covers">
              <!-- Create a binding between the searchString model and the text field -->
              <li ng-repeat="i in myplaylists ">
                <div class="u-cover">
                  <img ng-src="{{!i.cover_img_url}}">
                  <a title="" class="mask" ng-click="showPlaylist(i.list_id)"></a>
                  <div class="bottom">
                    <span class="icon-headset"></span>
                    <!-- span class="nb">{{! i.play_count }}</span -->
                    <a class="icon-play" ng-click="directplaylist(i.list_id)" title="播放"></a>
                  </div>
                </div>
                <p class="desc">
                  <a title="" ng-click="showPlaylist(i.list_id)">{{!i.title}}</a>
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>


    <!-- content page: 精选歌单 -->
    <div class="site-wrapper" ng-show="current_tag==2" ng-controller="PlayListController" ng-init="loadPlaylist();">
      <div class="site-wrapper-innerd" resize>
        <div class="cover-container">
          <div class="btn-group-vertical source-list" ng-show="is_window_hidden==1">
            <button type="button" class="btn btn-default" ng-class="{'active':isActiveTab(0)}" ng-click="changeTab(0)">网易</button> 
            <button type="button" class="btn btn-default" ng-class="{'active':isActiveTab(1)}" ng-click="changeTab(1)">虾米</button>
            <button type="button" class="btn btn-default" ng-class="{'active':isActiveTab(2)}" ng-click="changeTab(2)">QQ音乐</button>
            <button type="button" class="btn btn-default" ng-class="{'active':isActiveTab(3)}" ng-click="changeTab(3)" ng-show="isDoubanLogin">豆瓣</button>
          </div>
          <div class="playlist">
            <ul class="playlist-covers">
              <li ng-repeat="i in result ">
                <div class="u-cover">
                  <img ng-src="{{!i.cover_img_url}}">
                  <a title="" class="mask" ng-click="showPlaylist(i.list_id)"></a>
                  <div class="bottom">
                    <a class="icon-play" title="播放" ng-click="directplaylist(i.list_id)"></a>
                  </div>
                </div>
                <p class="desc">
                  <a title="{{!i.title}}" ng-click="showPlaylist(i.list_id)">{{!i.title}}</a>
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>


    <!-- content page: 快速搜索 -->
    <div class="site-wrapper" ng-show="current_tag==3">
      <div class="site-wrapper-innerd" resize>
        <div class="cover-container">
          <!-- Initialize a new AngularJS app and associate it with a module named "instantSearch"-->
          <div class="searchbox" ng-controller="InstantSearchController" >
            <!-- Create a binding between the searchString model and the text field -->
            <input type="text" class="form-control" ng-model="keywords" placeholder="输入歌曲名，歌手或专辑"  ng-model-options="{debounce: 500}" />

            <ul class="nav nav-tabs"> 
              <li ng-class="{'active':isActiveTab(0)}" ng-click="changeTab(0)"><a>网易</a></li>
              <li ng-class="{'active':isActiveTab(1)}" ng-click="changeTab(1)"><a href="#">虾米</a></li>
              <li  ng-class="{'active':isActiveTab(2)}" ng-click="changeTab(2)"><a href="#">QQ音乐</a></li> 
              <li  ng-class="{'active':isActiveTab(3)}" ng-click="changeTab(3)" ng-show="isDoubanLogin"><a href="#">豆瓣</a></li> 
            </ul>

            <ul class="detail-songlist">
              <li ng-repeat="song in result" ng-class-odd="'odd'" ng-class-even="'even'" ng-mouseenter="options=true" ng-mouseleave="options=false">
                  <div class="col2"><a add-and-play="song">{{! song.title }}</a></div>
                  <div class="col1 detail-artist"><a ng-click="showArtist(song.artist_id)">{{! song.artist }}</a></div>
                  <div class="col2"><a ng-click="showAlbum(song.album_id)">{{! song.album }}</a></div>
                  <div class="detail-tools">
                    <a title="添加到当前播放" class="detail-add-button" add-without-play="song" ng-show="options"></a>
                    <a title="添加到歌单" class="detail-fav-button" ng-show="options" ng-click="showDialog(0, song)"></a>
                    <a title="原始链接" class="source-button" open-song-source="song" ng-show="options"></a>
                  </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>


    <!-- content page: 设置 -->
    <div class="site-wrapper" ng-show="current_tag==4">
      <div class="site-wrapper-innerd" resize>
        <div class="cover-container">
          <div class="settings-title"><span>第三方登录<span></div>
          <div class="settings-content">
            <div ng-show="isDoubanLogin"> 豆瓣：<button class="btn btn-primary confirm-button" ng-click="showDialog(2)">已登录</button></div>
            <div ng-hide="isDoubanLogin"> 豆瓣：<button class="btn btn-primary confirm-button" ng-click="showDialog(2)">登录</button> </div>
          </div>
          <div class="settings-title"><span>关于<span></div>
          <div class="settings-content">
            <p> Listen 1 主页: <a href="https://github.com/listen1/listen1" target="_blank"> https://github.com/listen1/listen1 </a> </p>
            <p> Listen 1 邮箱: githublisten1@gmail.com </p>
            <p> 当前版本 1.0 (本软件基于MIT协议开源免费)</p>
            <p>“QQ”、“QQ音乐”及企鹅形象等文字、图形和商业标识，其著作权或商标权归腾讯公司所有。 QQ音乐享有对其平台授权音乐的版权，请勿随意下载，复制版权内容。具体内容请参考QQ音乐用户协议。</p>
          </div>
        </div>
      </div>
    </div>


    <!-- track list window -->
    <div class="site-wrapper" ng-hide="is_window_hidden==1" ng-controller="PlayController">
      <div class="site-wrapper-innerd" resize>
        <div class="cover-container" >

          <div class="playlist-detail" >
            <div class="detail-close"> 
              <span ng-click="popWindow()">&times;</span>
            </div>

            <div class="detail-head">
              <div class="detail-head-cover">
                <img ng-src="{{! cover_img_url }}">
              </div>
              <div class="detail-head-title">
                <h2>{{! playlist_title }}</h2>
                <a title="播放歌单" class="play" ng-show="playlist_title!=''" ng-click="playmylist(list_id)">播放</a>
                <a title="删除歌单" class="delete" ng-show="playlist_title!='' && is_mine=='1'" ng-click="removemylist(list_id)">删除</a>
                <a title="收藏歌单" class="clone" ng-show="playlist_title!='' && is_mine=='0'" ng-click="clonelist(list_id)">收藏</a>
              </div>
            </div>
            <ul class="detail-songlist">
              <li ng-repeat="song in songs" ng-class-odd="'odd'" ng-class-even="'even'" ng-mouseenter="options=true" ng-mouseleave="options=false">
                  <div class="col2"><a add-and-play="song">{{! song.title }}</a></div>
                  <div class="col1 detail-artist"><a ng-click="showArtist(song.artist_id)">{{! song.artist }}</a></div>
                  <div class="col2"><a ng-click="showAlbum(song.album_id)">{{! song.album }}</a></div>
                  <div class="detail-tools">
                    <a title="添加到当前播放" class="detail-add-button" add-without-play="song" ng-show="options"></a>
                    <a title="添加到歌单" class="detail-fav-button" ng-click="showDialog(0, song)" ng-show="options"></a>
                    <a title="原始链接" class="source-button" open-song-source="song" ng-show="options"></a>
                    <a title="从歌单删除" class="detail-delete-button" ng-click="removeSongFromPlaylist(song, list_id)" ng-show="options && is_mine=='1' "></a>
                  </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>


    <!-- page footer -->
    <div class="mastfoot" ng-controller="PlayController as playCtrl" ng-init="loadLocalSettings()">
      <div class="m-playbar" >
        <div class="btns">
          <a class="previous" title="上一首" prev-track >上一首</a>
          <a class="play" ng-class="{pas: isPlaying}" title="播放/暂停" play-pause-toggle>播放/暂停</a>
          <a class="next" title="下一首" next-track>下一首</a>
        </div>

        <div class="head">
          <img ng-src="{{! currentPlaying.img_url }}" err-src="/static/images/placeholder.png">
          <a ng-click="showAlbum(currentPlaying.album_id)" class="mask"></a>
        </div>

        <div class="maininfo">
          <div class="words">
            <a class="overflowhide name notextdeco floatleft" title="{{!currentPlaying.title}}">{{!currentPlaying.title}}</a>
            <span class="by overflowhide floatleft">
              <span title="{{! currentPlaying.artist }}">
                <a class="" ng-click="showArtist(currentPlaying.artist_id)">{{! currentPlaying.artist }}</a>
              </span>
            </span>
            <a open-song-source="currentPlaying" class="src" title="原始链接"></a>  
          </div>

          <div class="m-pbar" draggable>
            <div class="barbg" id="progressbar">
              <!-- <div class="rdy" ng-style="{width : myProgress + '%' }"></div> -->
              <div  class="cur" ng-style="{width : myProgress + '%' }">
                <span class="btn"><i></i></span>
              </div>
            </div>

            <span class="time"><em>{{! currentPostion }}</em> <span ng-show=" currentDuration!=none ">/</span> {{! currentDuration }}</span>
          </div>

          <!-- init soundManager2 player -->
          <sound-manager></sound-manager>
        </div>

        <div class="ctrl">
          <a class="icn icn-add" ng-click="showDialog(0, currentPlaying)" title="添加到歌单">添加到歌单</a>
          <a class="icn" ng-class="{ 'icn-shuffle': settings.playmode == 1, 'icn-loop': settings.playmode == 0 }" title="随机" ng-click="changePlaymode()"></a>
          <a class="icn icn-list" title="列表" ng-click="togglePlaylist()"></a>
        </div>

        <div class="menu" ng-hide="menuHidden">
          <div class="menu-header">播放列表 
              <a class="remove-all" ng-click="menuHidden=!menuHidden">
                    <small>关闭</small>
              </a>
              <a clear-playlist class="remove-all">
                    <small>(移除所有)</small>
              </a>

          </div>
          <ul>
            <li id="song{{! song.id }}" ng-repeat="song in playlist" ng-class="{ playing: currentPlaying.id == song.id }" ng-mouseenter="playlist_highlight=true" ng-mouseleave="playlist_highlight=false">
              <div class="title" play-from-playlist="song"><a>{{! song.title }}</a></div>
              <a class="icn-remove" remove-from-playlist="song" data-index="{{!$index}}" ng-show="playlist_highlight"></a>
              <div class="singer" ng-click="showArtist(song.artist_id)">{{! song.artist }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>

  </body>
</html>
